<template>
    <div style="margin-top: 20px;">
        <div class="d-f jc-sb ai-c">
            <div>
                <p style="font-size: 20px;color: #2d8cf0;">
                    ▊ 待办事项
                </p>
            </div>
        </div>
        <div class="mt-10">
            <Table2 storageKey="backlogModuleListTable" :columns="backlogModuleListColumns"
                       :data="backlogModuleListData"  :height="customerTableHeight"></Table2>
            <Page
                    ref="currentPage"
                    :total="totalElements"
                    :page-size="size"
                    @on-change="changePage"
                    @on-page-size-change="changePageSize"
                    show-sizer
                    :page-size-opts="[5, 10, 20, 30, 40]"
                    show-total
                    style="margin-top:30px;text-align:center;"></Page>
        </div>
    </div>
</template>

<script>
    import Table2 from '@/pages/components/table';
    import util from '@/libs/util';
    export default {
        name: 'backlogModuleList',
        components: {Table2},
        data () {
            return {
                customerTableHeight: 520,
                backlogModuleListColumns: [
                    {
                        title: '序号',
                        key: 'index',
                        align: 'center',
                        width: 80,
                        render: (h, params) => {
                            return h('span', {
                                props: {}
                            }, params.row._index + 1);
                        }
                    }, {
                        title: '发起人',
                        key: 'startUserName',
                        align: 'center',
                        tooltip: true,
                        ellipsis: true,
                        width: 120,
                        render: (h, params) => {
                            return h('span', {
                                props: {}
                            }, params.row._index + 1);
                        }
                    }, {
                        title: '待办事项',
                        key: 'title',
                        align: 'center',
                        tooltip: true,
                        ellipsis: true,
                        minWidth: 200,
                        render: (h, params) => {
                            return h('a', {
                                props: {},
                                on: {
                                    click: () => {
                                        this.goToBacklogModule(params.row.resourceId, params.row.resourceId, params.row.link);
                                    }
                                }
                            }, params.row.title);
                        }
                    }, {
                        title: '公司',
                        key: 'companyName',
                        align: 'center',
                        tooltip: true,
                        ellipsis: true,
                        minWidth: 200
                    }, {
                        title: '发起时间',
                        key: 'createTime',
                        align: 'center',
                        width: 160,
                        tooltip: true
                    }],
                backlogModuleListData: [],
                totalElements: 0,
                page: 0,
                size: 10
            };
        },
        mounted () {
            this.setTableHeight();
            this.loadBacklogModuleListData();
        },
        methods: {
            loadBacklogModuleListData () {
                let queryParams = {};
                queryParams.page = this.page;
                queryParams.size = this.size;
                depot.get({
                    url: this.URL.USER.FIND_BACKLOG_LIST_BY_PAGE_AND_WAITING,
                    config: {
                        params: queryParams
                    },
                    cb: (data) => {
                        if (data.code === 0) {
                            this.backlogModuleListData = data.data.content;
                            this.size = data.data.size;
                            this.totalElements = data.data.totalElements;
                        } else if (data.code === 999) {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: (error) => {
                    }
                });
            },
            goToBacklogModule (id, resourceId, link) {
                if (!id && !link) {
                    this.$Message.error('无法获取任务类型，请刷新后重试');
                    return;
                }
                // 目前这里只有两种跳转方式
                // 1：工作流 resourceId就是taskInfoId
                // 2: 调级 调级不需要传值
                this.$router.push({
                    name: link,
                    params: {
                        missionId: resourceId
                    }
                });
            },
            // 翻页
            changePage (val) {
                this.page = val - 1;
                this.loadBacklogModuleListData();
            },
            // 修改页面数据量
            changePageSize (val) {
                this.size = val;
                this.loadBacklogModuleListData();
            },
            //设置表单高度
            setTableHeight () {
                this.customerTableHeight = util.getTableHeight() - 20;
            }
        }
    };
</script>

<style scoped>

</style>